<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<!-- <script lang="ts">
    export default {
        name: 'Person',
        setup() {
            vue2 选项式语法可以同时用，data里边可以读到setup里边的数据，反之不行
            let name = 'asd'
            let age = 14
            let tel = '12342345345'

            function changeAge () {
                age += 1
            } 
            
            function changeName () {
                name = 'asdasd'
            }

            function showTel () {
                alert(tel)
            }

            return {name, age, changeAge, changeName, showTel}
            return () => "asdasd"  可以直接返回渲染函数
        }
    }
</script> -->

<script lang="ts" setup name="Person2231">
    let name = 'asd'
    let age = 14
    let tel = '12342345345'

    function changeAge () {
        age += 1
    } 
    
    function changeName () {
        name = 'asdasd'
    }

    function showTel () {
        alert(tel)
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>